<template>
  <SeachTable 
    class="mySeachTable"
    :key="sortId"
    :tableType="1" 
    ref="seachTableRef" 
    :forms="tableForms" 
    :btnLefts="btnLefts"
    :tableLoading="tableLoading" 
    :tableConfig="tableConfig" 
    :tableData="tableData" 
    :totalPage="totalPage"
    @drawHandle="drawHandle"
    :isShowPage="false"
    :isDrag="true"
    @handlerSearch="handlerSearch">
    <template #icon="{row}">
      <el-image class="icon" :src="row.configImg" fit="contain" />
    </template>
    <template #state="{row}">
      <el-switch :model-value="row.enableStatus" @change="changeState(row)" />
    </template>
  </SeachTable>
  <ActionDialog />
</template>

<script setup>
import { paymentSetupEdit,paymentSetupSort } from '@/api/BusinessScope/paymentSetup'
import { useConfirm } from '@/hooks';
import { useCurd,usePaymentSetup } from './Hooks/index'
import ActionDialog from './Components/ActionDialog.vue'

const { 
  tableConfig,
  tableData,
  tableLoading,
  totalPage,
  handlerSearch,
  btnLefts,
  tableForms
 } = useCurd()
const { seachTableRef } = usePaymentSetup()

const changeState = async (row)=>{
  const params = {
    id:row.id,
    payType:row.configValue,
    configImg:row.configImg,
    configRemark:row.configDesc,
    enableStatus:row.enableStatus ? false : true,
  }
  if(row.enableStatus){
    ElMessageBox.confirm(`确定要禁用【${row.configValue}】支付方式吗？`, '提示', {
      type: 'warning',
      beforeClose:async (action, instance, done) => {
        const res = await useConfirm(action, instance, done,paymentSetupEdit,params)
        if(res){
          ElMessage.success('禁用成功')
          seachTableRef.value.handlerSearch()
        }
      }
    })
  }else{
    await paymentSetupEdit(params)
    ElMessage.success('启用成功')
    seachTableRef.value.handlerSearch()
  }
}
 const sortId = ref(0)
 const drawHandle = async (newIndex,oldIndex)=>{
    if(newIndex!== oldIndex){
      try{
        tableLoading.value = true;
        let idList = tableData.value.map(item=>item.id)
        const oldValue = idList[oldIndex]
        idList.splice(oldIndex,1)
        idList.splice(newIndex,0,oldValue)
        await paymentSetupSort(idList)
        sortId.value++
      }finally{
        tableLoading.value = false;
      }
    }
 }
  
</script>

<style lang="less" scoped>
.mySeachTable{
  :deep(.search-table){
    .line-block,.jg{
      display: none;
    }
    .defaultTable{
      height: calc(100% - 128px) !important;
    }
  }
  :deep(.el-table__row){
    cursor: move;
  }
}
.icon{
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid #DDD;
  background: #FFF;
  overflow: hidden;
}
</style>